<template>
  <a-tree-select
    :default-value="defaultValue"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :tree-data="companyPositionList"
    :tree-checkable="record.options.multiple"
    :allow-clear="record.options.clearable"
    :placeholder="record.options.placeholder"
    :disabled="disabled"
    tree-default-expand-all
    style="width: 100%"
    @change="onChange"
  >
    <span slot="title" slot-scope="{ key, value }">
      {{ value }}
    </span>
  </a-tree-select>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "Position",
  props: ["record", "value"],
  data() {
    return {
      positionList: [],
      defaultValue: null,
      disabled: this.record.options.disabled
    };
  },
  computed: {
    ...mapGetters(["companyPositionList"])
  },
  created() {
    const defaultValue = this.record.options.defaultValue;
    if (defaultValue && defaultValue.length > 0) {
      this.defaultValue = this.record.options.multiple ? defaultValue.split(",") : defaultValue;
    }
  },
  methods: {
    onChange(val) {
      const val_temp = this.record.options.multiple ? val.join(",") : val;
      this.$emit("input", val_temp);
      this.$emit("change", val_temp);
    }
  }
};
</script>
